<template>
  <div style="padding: 10px">
    <d-select-table
      v-model="selectValue"
      v-model:textValue="textValue"
      :tableConfig="tableConfig"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></d-select-table>
    <p>selectValue值：{{ selectValue }}</p>
  </div>
</template>
<script setup lang="ts">
  import { ref, toRef } from 'vue'
  import { ElMessage } from 'element-plus'

  const selectValue = ref('1,4,14')
  const textValue = ref('测试1,测试4,测试14')

  // mock数据
  const allData = [
    { date: '2016-05-0111', name: '测试1', id: 1 },
    { date: '2016-05-02', name: '测试2', id: 2 },
    { date: '2016-05-03', name: '测试3', id: 3 },
    { date: '2016-05-04', name: '测试4', id: 4 },
    { date: '2016-05-05', name: '测试5', id: 5 },
    { date: '2016-05-06', name: '测试6', id: 6 },
    { date: '2016-05-07', name: '测试7', id: 7 },
    { date: '2016-05-08', name: '测试8', id: 8 },
    { date: '2016-05-09', name: '测试9', id: 9 },
    { date: '2016-05-10', name: '测试10', id: 10 },
    { date: '2016-05-11', name: '测试11', id: 11 },
    { date: '2016-05-01', name: '测试12', id: 12 },
    { date: '2016-05-02', name: '测试13', id: 13 },
    { date: '2016-05-03', name: '测试14', id: 14 },
    { date: '2016-05-04', name: '测试15', id: 15 },
    { date: '2016-05-05', name: '测试16', id: 16 },
    { date: '2016-05-06', name: '测试17', id: 17 },
    { date: '2016-05-07', name: '测试18', id: 18 },
    { date: '2016-05-08', name: '测试19', id: 19 }
  ]
  const tableData: any = ref([])
  //   禁选项
  const selectable = (row: any) => ![2].includes(row.id)
  const tableConfig = ref({
    multiple: true,
    rowKey: 'id',
    props: { label: 'name', value: 'id' },
    data: toRef(tableData, 'value'),
    columns: [
      { label: '多选', cType: 'checkbox', width: '90', selectable: selectable },
      { label: '日期', prop: 'date', width: 120 },
      { label: '姓名', prop: 'name' },
      { label: 'id', prop: 'id' }
    ],
    pagination: {
      pageSizes: [5, 10, 20, 30],
      total: allData.length,
      currentPage: 1,
      pageSize: 5
    }
  })
  tableData.value = allData.slice(
    (tableConfig.value.pagination.currentPage - 1) * tableConfig.value.pagination.pageSize,
    tableConfig.value.pagination.currentPage * tableConfig.value.pagination.pageSize
  )
  // 分页 size
  const handleSizeChange = (val: number) => {
    tableConfig.value.pagination.pageSize = val
    ElMessage.success(
      `切换到第 ${tableConfig.value.pagination.currentPage} 页,每页 ${tableConfig.value.pagination.pageSize} 条`
    )
    tableData.value = allData.slice(
      (tableConfig.value.pagination.currentPage - 1) * val,
      tableConfig.value.pagination.currentPage * val
    )
  }
  // 分页 page
  const handleCurrentChange = (val: number) => {
    tableConfig.value.pagination.currentPage = val
    ElMessage.success(
      `切换到第 ${tableConfig.value.pagination.currentPage} 页,每页 ${tableConfig.value.pagination.pageSize} 条`
    )
    tableData.value = allData.slice(
      (tableConfig.value.pagination.currentPage - 1) * tableConfig.value.pagination.pageSize,
      tableConfig.value.pagination.currentPage * tableConfig.value.pagination.pageSize
    )
  }
</script>
